import React from "react";
import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
import Button from "antd/lib/button";
import Col from "antd/lib/col";
import Divider from "antd/lib/divider";
import Menu from "antd/lib/menu";
import Dropdown from "antd/lib/dropdown";
import Row from "antd/lib/row";
import Radio from "antd/lib/radio";
import Select from "antd/lib/select";
import Table from "antd/lib/table";
import message from 'antd/lib/message';
import FileExcelOutlinedIcon from "@ant-design/icons/FileExcelOutlined";
import ConfigProvider from "antd/lib/config-provider";
import Layout from "antd/lib/layout";
import Modal from "antd/lib/modal";
import AutoComplete from "antd/lib/auto-complete";
import zhCN from 'antd/es/locale/zh_CN';
import Employee from "@/services/employee";
import Upload from "antd/lib/upload";
import Enums from "@/services/enums";
import { currentUser } from "@/services/auth";
import routes from "@/services/routes";
import notification from "@/services/notification";
import DatePicker from "antd/lib/date-picker";
import locale from 'antd/es/date-picker/locale/zh_CN';
import { get } from "lodash";
import Workflow from "@/services/workflow";
import CreateEmployeeBatchMoveDialog from "@/components/employee/EmployeeBatchMoveDialog";
import Customer from "@/services/customer";
import { DownOutlined, AppstoreFilled, UpOutlined } from "@ant-design/icons";
import QueryShowField from "@/services/queryshowfield";
import CreateQueryShowFieldDialog from "@/components/enums/QueryShowFieldDialog";
import EmployeeActivityDialog from "@/components/employee/EmployeeActivityDialog";

const { confirm } = Modal;
const getRowClassName = (record, index) => {
  let className = '';
  if (index % 2 === 0) className = "oddRow";
  return className
}

class EmployeeAdminList extends React.Component {
  state = {
    page: 1,
    pagesize: localStorage.getItem("employeeadminlistpagesize") ? (localStorage.getItem("employeeadminlistpagesize") !== undefined ? Number(localStorage.getItem("employeeadminlistpagesize")) : 20) : 20,
    total: 1,
    order: 1,
    loading: false,
    code: localStorage.getItem("employeeadminlistcode") ? (localStorage.getItem("employeeadminlistcode") !== undefined ? localStorage.getItem("employeeadminlistcode") : '') : '',
    name: localStorage.getItem("employeeadminlistname") ? (localStorage.getItem("employeeadminlistname") !== undefined ? localStorage.getItem("employeeadminlistname") : '') : '',
    major: localStorage.getItem("employeeadminlistmajor") ? (localStorage.getItem("employeeadminlistmajor") !== undefined ? localStorage.getItem("employeeadminlistmajor") : '') : '',
    area: localStorage.getItem("employeeadminlistarea") ? (localStorage.getItem("employeeadminlistarea") !== undefined ? localStorage.getItem("employeeadminlistarea") : '') : '',
    bytstatus: localStorage.getItem("employeeadminlistbytstatus") ? (localStorage.getItem("employeeadminlistbytstatus") !== undefined ? localStorage.getItem("employeeadminlistbytstatus") : '') : '',
    certificate: localStorage.getItem("employeeadminlistcertificate") ? (localStorage.getItem("employeeadminlistcertificate") !== undefined ? localStorage.getItem("employeeadminlistcertificate") : '') : '',
    location: localStorage.getItem("employeeadminlistlocation") ? (localStorage.getItem("employeeadminlistlocation") !== undefined ? localStorage.getItem("employeeadminlistlocation") : '') : '',
    mobile: localStorage.getItem("employeeadminlistmobile") ? (localStorage.getItem("employeeadminlistmobile") !== undefined ? localStorage.getItem("employeeadminlistmobile") : '') : '',
    idcard: localStorage.getItem("employeeadminlistidcard") ? (localStorage.getItem("employeeadminlistidcard") !== undefined ? localStorage.getItem("employeeadminlistidcard") : '') : '',
    periodunit: localStorage.getItem("employeeadminlistperiodunit") ? (localStorage.getItem("employeeadminlistperiodunit") !== undefined ? localStorage.getItem("employeeadminlistperiodunit") : '') : '',
    contacts: localStorage.getItem("employeeadminlistcontacts") ? (localStorage.getItem("employeeadminlistcontacts") !== undefined ? localStorage.getItem("employeeadminlistcontacts") : '') : '',
    contactsmobile: localStorage.getItem("employeeadminlistcontactsmobile") ? (localStorage.getItem("employeeadminlistcontactsmobile") !== undefined ? localStorage.getItem("employeeadminlistcontactsmobile") : '') : '',
    genjindate: [],
    userid: "",
    data: [],
    employeestatusdata: [],
    employeemajordata: [],
    employeecertificatedata: [],
    employeeareadata: [],
    selectedrowkeys: [],
    selectedrows: [],
    employeeuserdata: [],
    maintainer: currentUser.id,
    openseapool: 1,
    queryshowfielddata: [],
    showall: false,
    periodunitdata: [{ id: "年", name: "年" }, { id: "半年", name: "半年" }, { id: "月", name: "月" }],
  };
  componentWillMount() {
    this.fieldsshowload();
    Enums.items("employeestatus").then(data => {
      this.setState({
        employeestatusdata: data,
      });
    });
    Enums.items("employeemajor").then(data => {
      this.setState({
        employeemajordata: data,
      });
    });
    Enums.items("employeecertificate").then(data => {
      this.setState({
        employeecertificatedata: data,
      });
    });
    Enums.items("employeearea").then(data => {
      this.setState({
        employeeareadata: data,
      });
    });
    Customer.querycustomeruser({ code: "", name: "", userid: currentUser.id, }).then(data => {
      this.setState({
        employeeuserdata: data,
      });
    });
    let param = {
      page: this.state.page,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      major: this.state.major,
      area: this.state.area,
      bytstatus: this.state.bytstatus,
      certificate: this.state.certificate,
      location: this.state.location,
      contacts:  this.state.contacts,
      contactsmobile: this.state.contactsmobile,
      mobile: this.state.mobile,
      idcard: this.state.idcard,
      periodunit: this.state.periodunit,
      userid: this.state.userid,
      openseapool: this.state.openseapool,
      maintainer: this.state.maintainer,
      id: 0,
      datadown: false,
    }
    this.seldata(param);
  }
  fieldsshowload = () => {
    QueryShowField.getbycode("employeeadminlist").then(data => {
      this.setState({
        queryshowfielddata: data,
      });
    });
  }
  handlefieldshow = () => {
    CreateQueryShowFieldDialog.showModal({ queryshowfield: this.state.queryshowfielddata })
      .onClose((result = {}) => {
        if (result.success) {
          this.fieldsshowload();
        }
      }).onDismiss(() => {
      });
  }
  isEmptyobj = (str) => {
    if (str === '' || str === null || str === 'null' || str === undefined || str === 'undefined') {
      return true;
    } else {
      return false;
    }
  }
  seldata = (params = {}) => {
    if (params.openseapool === 0) {
      if (params.maintainer === "") {
        notification.error("查询私有池必须指定人员");
        return;
      }
    }
    if (!this.isEmptyobj(this.state.genjindate)) {
      if (this.state.genjindate.length === 2) {
        params.genjinbegindate = this.state.genjindate[0].format('YYYY-MM-DD');
        params.genjinenddate = this.state.genjindate[1].format('YYYY-MM-DD');
      }
    }
    if (params.datadown) {
      if (this.state.data.length < 1) {
        notification.error("没有要导出的数据");
        return;
      }
      let AjaxUrl = 'api/employee/list';
      fetch(AjaxUrl, {
        method: 'POST',
        body: window.JSON.stringify(params),
        credentials: 'include',
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      }).then((response) => {
        response.blob().then(blob => {
          const aLink = document.createElement('a');
          document.body.appendChild(aLink);
          aLink.style.display = 'none';
          const objectUrl = window.URL.createObjectURL(blob);
          aLink.href = objectUrl;
          aLink.download = '人员信息.xlsx';
          aLink.click();
          document.body.removeChild(aLink);
        });
      }).catch((error) => {
        window.console.log(error);
      });
    }
    else {
      this.setState({ loading: true });
      Employee.getlist(params).then(data => {
        this.setState({
          loading: false,
          data: data.data,
          page: params.page,
          pagesize: params.pagesize,
          total: data.total,
          field: params.field,
          order: params.order,
          selectedrowkeys: [],
          selectedrows: [],
        });
      });
    }
  };

  handlesel = (index) => {
    let datadown = false;
    if (index === 2) {
      datadown = true;
    }
    let param = {
      page: 1,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      major: this.state.major,
      area: this.state.area,
      bytstatus: this.state.bytstatus,
      certificate: this.state.certificate,
      location: this.state.location,
      contacts:  this.state.contacts,
      contactsmobile: this.state.contactsmobile,
      mobile: this.state.mobile,
      idcard: this.state.idcard,
      periodunit: this.state.periodunit,
      userid: this.state.userid,
      openseapool: this.state.openseapool,
      maintainer: this.state.maintainer,
      id: 0,
      datadown: datadown,
    }
    this.seldata(param);
  };
  handleDelete = record => {
    if (record.blnisinactive) {
      notification.error("只有在草稿状态可以删除，删除失败！");
      return;
    }
    if (!currentUser.hasPermission("admin")) {
      notification.error("只有管理员可以删除，删除失败！");
      return;
    }
    confirm({
      title: '确定删除人才记录?',
      content: record.code,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        Employee.delete(record).then(() => {
          notification.success("删除成功.");
          let param = {
            page: 1,
            pagesize: this.state.pagesize,
            code: this.state.code,
            name: this.state.name,
            major: this.state.major,
            area: this.state.area,
            bytstatus: this.state.bytstatus,
            certificate: this.state.certificate,
            location: this.state.location,
            contacts:  this.state.contacts,
            contactsmobile: this.state.contactsmobile,
            mobile: this.state.mobile,
            idcard: this.state.idcard,
            periodunit: this.state.periodunit,
            userid: this.state.userid,
            openseapool: this.state.openseapool,
            maintainer: this.state.maintainer,
            id: 0,
            datadown: false,
          }
          this.seldata(param);
        }).catch(error => {
          notification.error(get(error, "response.data.message", "删除失败."));
        });
      },
    });
  };
  handleTableChange = (pagination, filters, sorter) => {
    localStorage.setItem("employeeadminlistpagesize", pagination.pageSize);
    let field = sorter.field;
    let order = 0;
    if (sorter.order === "descend") {
      order = 1;
    }
    let param = {
      field: field,
      order: order,
      page: pagination.current,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      major: this.state.major,
      area: this.state.area,
      bytstatus: this.state.bytstatus,
      certificate: this.state.certificate,
      location: this.state.location,
      contacts:  this.state.contacts,
      contactsmobile: this.state.contactsmobile,
      mobile: this.state.mobile,
      idcard: this.state.idcard,
      periodunit: this.state.periodunit,
      userid: this.state.userid,
      openseapool: this.state.openseapool,
      maintainer: this.state.maintainer,
      id: 0,
      datadown: false,
    }
    this.seldata(param);
  };
  uploadProps() {
    const params = {
      page: 1,
      pagesize: this.state.pagesize,
      code: this.state.code,
      name: this.state.name,
      major: this.state.major,
      area: this.state.area,
      bytstatus: this.state.bytstatus,
      certificate: this.state.certificate,
      location: this.state.location,
      contacts:  this.state.contacts,
      contactsmobile: this.state.contactsmobile,
      mobile: this.state.mobile,
      idcard: this.state.idcard,
      periodunit: this.state.periodunit,
      userid: this.state.userid,
      openseapool: this.state.openseapool,
      maintainer: this.state.maintainer,
      id: 0,
      datadown: false,
    }
    const _this = this;
    const props = {
      name: 'file',
      showUploadList: false,
      accept: ".xls,.xlsx",
      action: `api/upload/importexcel/employee/${this.state.openseapool}`,
      maxCount: 1,
      headers: {
        authorization: 'authorization-text',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          window.console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          if (info.file.response.code === "sucess") {
            const successInfo = `${info.file.name} 文件 ` + info.file.response.message
            message.success(successInfo);
            _this.seldata(params);
          } else {
            message.error(`${info.file.name} 文件导入失败，` + info.file.response.message);
          }
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件导入失败，请联系系统管理员`);
        }
      },
    };
    return props;
  };
  handleCheck = (record) => {
    if (!currentUser.isAudit) {
      notification.error("没有权限.");
      return;
    }

    const item = {
      bill: "employee",
      billtype: this.state.openseapool,
      billid: record.id,
      next_type: 1,
      message: '<div>同意</div>',
      userid: currentUser.id,
      billdate: this.state.bill_date.format('YYYY-MM-DD'),
      orgunitid: record.orgunitid,
    }
    Workflow.check(item).then(data => {
      if (data[0].flag === 0) {
        notification.success(data[0].message);
        let param = {
          page: 1,
          pagesize: this.state.pagesize,
          code: this.state.code,
          name: this.state.name,
          major: this.state.major,
          area: this.state.area,
          bytstatus: this.state.bytstatus,
          certificate: this.state.certificate,
          location: this.state.location,
          contacts:  this.state.contacts,
          contactsmobile: this.state.contactsmobile,
          mobile: this.state.mobile,
          idcard: this.state.idcard,
          periodunit: this.state.periodunit,
          userid: this.state.userid,
          openseapool: this.state.openseapool,
          maintainer: this.state.maintainer,
          id: 0,
          datadown: false,
        }
        this.seldata(param);
      } else {
        notification.error(data[0].message);
      }
    })
      .catch(error => {
        notification.error(error.message, error.detailedMessage);
      });
  }
  onDragEnter = info => {
    window.console.log(info);
  };
  rowSelection() {
    const _this = this;
    const props = {
      //selectedRowKeys,
      onChange(newSelectedRowKeys, newSselectedRows) {
        _this.setState({
          selectedrows: newSselectedRows,
          selectedrowkeys: newSelectedRowKeys,
        });
      },
    };
    return props;
  };
  openseapoolchange = (e) => {
    localStorage.setItem("employeeadminlistopenseapool", e.target.value);
    this.setState({
      openseapool: e.target.value,
      data: [],
      selectedrowkeys: [],
      selectedrows: [],
    });
  };
  handlebatchmove = () => {
    if (this.state.selectedrowkeys.length < 1) {
      notification.error("请选择需要转移的人员!");
      return;
    }
    const params = {
      selectedrowkeys: this.state.selectedrowkeys,
      selectedrows: this.state.selectedrows,
      employeeuserdata: this.state.employeeuserdata,
      openseapool: this.state.openseapool,
      sourcetype: 1,
    }
    CreateEmployeeBatchMoveDialog.showModal(params)
      .onClose((result = {}) => {
        if (result.success) {
          this.handlesel(1)
        }
      }).onDismiss(() => {
      });
  };
  handleactivityshow = (record) => {
    EmployeeActivityDialog.showModal({ sourceid: record.id, sourcetype: "employee", canedit: false })
      .onClose((result = {}) => {
      }).onDismiss(() => {
      });
  };
  handleclear = () => {
    this.setState({
      code: "",
      name: "",
      major: "",
      area: "",
      bytstatus: "",
      certificate: "",
      location: "",
      mobile: "",
      idcard: "",
      periodunit: "",
      contacts:  "",
      contactsmobile: "",
      userid:"",
      genjindate: [],
    });
    localStorage.setItem("employeeadminlistcode", "");
    localStorage.setItem("employeeadminlistname", "");
    localStorage.setItem("employeeadminlistmajor", "");
    localStorage.setItem("employeeadminlistarea", "");
    localStorage.setItem("employeeadminlistbytstatus", "");
    localStorage.setItem("employeeadminlistcertificate", "");
    localStorage.setItem("employeeadminlistlocation", "");
    localStorage.setItem("employeeadminlistmobile", "");
    localStorage.setItem("employeeadminlistidcard", "");
    localStorage.setItem("employeeadminlistperiodunit", "");
    localStorage.setItem("employeeadminlistcontacts", "");
    localStorage.setItem("employeeadminlistcontactsmobile", "");
  }
  render() {
    const paginationProps = {
      showSizeChanger: true,
      total: this.state.total, // 数据总数
      pageSize: parseInt(this.state.pagesize), // 每页条数
      current: parseInt(this.state.page), // 当前页码
      pageSizeOptions: ["10", "20", "30", "100"],
      showTotal: ((total) => {
        return `共 ${total} 条`;
      }),
    };
    let listcolumns = [];
    if (this.state.queryshowfielddata.fieldsshow !== undefined) {
      (this.state.queryshowfielddata.fieldsshow || []).map(item => {
        let items = this.state.queryshowfielddata.fieldsall.filter((p) => {
          return p.key === item;
        });
        if (items.length > 0) {
          listcolumns.push({
            title: items[0].title,
            dataIndex: item,
            key: item,
            sorter: (a, b) => a[item] > b[item] ? 1 : -1
          })
        }
        return item;
      }
      );
    }
    listcolumns.push({
      title: '操作',
      key: 'action',
      render: (record) => (
        <span>
          <Button size="small" onClick={() => this.handleactivityshow(record)}>
            跟进信息
          </Button>
        </span>
      ),
    });
    return (
      <ConfigProvider locale={zhCN}>
        <div style={{ width: "400px", height: "60px" }}>
          <div style={{ width: "20px", height: "50px", float: "left" }}>
          </div>
          <div style={{ width: "50px", height: "50px", float: "left" }}>
            <img src="/static/images/employeeadminlist.png" alt="HR" loading="lazy" />
          </div>
          <div style={{ width: "320px", height: "30px", float: "left" }}>
            <h3 style={{ margin: "7px", padding: "0" }}>{"人员信息批量处理"}</h3>
          </div>
        </div>
        <Layout>
          <Layout style={{ padding: '0 24px 24px' }}>
            {this.state.showall && (<><Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                人员编码:</div></Col>
              <Col span={6}>
                <AutoComplete
                  style={{ width: "100%" }}
                  value={this.state.code}
                  onChange={value => {
                    localStorage.setItem("employeeadminlistcode", value);
                    this.setState({ code: value });
                  }}
                  placeholder="人员编码"
                  filterOption={(inputValue, option) =>
                    option.value.indexOf(inputValue) !== -1}>
                </AutoComplete>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                人员名称:</div></Col>
              <Col span={6}>
                <AutoComplete
                  style={{ width: "100%" }}
                  value={this.state.name}
                  onChange={value => {
                    localStorage.setItem("employeeadminlistname", value);
                    this.setState({ name: value });
                  }}
                  placeholder="人员名称"
                  filterOption={(inputValue, option) =>
                    option.value.indexOf(inputValue) !== -1}>
                </AutoComplete>
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                毕业专业:</div></Col>
              <Col span={6}>
                <AutoComplete
                  style={{ width: "100%" }}
                  value={this.state.major}
                  onChange={value => {
                    localStorage.setItem("employeeadminlistmajor", value);
                    this.setState({ major: value });
                  }}
                  placeholder="毕业专业"
                  filterOption={(inputValue, option) =>
                    option.value.indexOf(inputValue) !== -1}>
                  {(this.state.employeemajordata || []).map(item => (
                    <AutoComplete.Option key={item.key} value={item.key}>{item.key}</AutoComplete.Option>
                  ))}
                </AutoComplete>
              </Col>
            </Row>

              <Row style={{ marginBottom: 5 }}>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  状态:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.bytstatus}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistbytstatus", value);
                      this.setState({ bytstatus: value });
                    }}
                    placeholder="状态"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                    {(this.state.employeestatusdata || []).map(item => (
                      <AutoComplete.Option key={item.key} value={item.key}>{item.key}</AutoComplete.Option>
                    ))}
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  证书:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.certificate}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistcertificate", value);
                      this.setState({ certificate: value });
                    }}
                    placeholder="证书"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                    {(this.state.employeecertificatedata || []).map(item => (
                      <AutoComplete.Option key={item.key} value={item.key}>{item.key}</AutoComplete.Option>
                    ))}
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  地区:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.location}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistlocation", value);
                      this.setState({ location: value });
                    }}
                    placeholder="地区"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                    {(this.state.employeeareadata || []).map(item => (
                      <AutoComplete.Option key={item.key} value={item.key}>{item.key}</AutoComplete.Option>
                    ))}
                  </AutoComplete>
                </Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  手机:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.mobile}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistmobile", value);
                      this.setState({ mobile: value });
                    }}
                    placeholder="手机"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  身份证号:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.idcard}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistidcard", value);
                      this.setState({ idcard: value });
                    }}
                    placeholder="身份证号"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  社保地区:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.area}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistarea", value);
                      this.setState({ area: value });
                    }}
                    placeholder="社保地区"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                    {(this.state.employeeareadata || []).map(item => (
                      <AutoComplete.Option key={item.key} value={item.key}>{item.key}</AutoComplete.Option>
                    ))}
                  </AutoComplete>
                </Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                联系人:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.contacts}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistcontacts", value);
                      this.setState({ contacts: value });
                    }}
                    placeholder="联系人"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                联系方式:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.contactsmobile}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistcontactsmobile", value);
                      this.setState({ contactsmobile: value });
                    }}
                    placeholder="联系方式"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  录入人:</div></Col>
                <Col span={6}>
                  <Select style={{ width: "100%" }}
                    showSearch
                    allowClear
                    optionFilterProp="children"
                    value={this.state.userid}
                    onChange={value => {
                      this.setState({ userid: value });
                    }}>
                    {(this.state.employeeuserdata || []).map(item => (
                      <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  期限单位:</div></Col>
                <Col span={6}>
                  <AutoComplete
                    style={{ width: "100%" }}
                    value={this.state.periodunit}
                    onChange={value => {
                      localStorage.setItem("employeelistperiodunit", value);
                      this.setState({ periodunit: value });
                    }}
                    placeholder="期限单位"
                    filterOption={(inputValue, option) =>
                      option.value.indexOf(inputValue) !== -1}>
                    {(this.state.periodunitdata || []).map(item => (
                      <AutoComplete.Option key={item.id} value={item.id}>{item.name}</AutoComplete.Option>
                    ))}
                  </AutoComplete>
                </Col>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  跟进日期:</div></Col>
                <Col span={6}>
                  <DatePicker.RangePicker
                    locale={locale}
                    style={{ width: "100%" }}
                    value={this.state.genjindate}
                    onChange={value => {
                      this.setState({
                        genjindate: value,
                      });
                    }}
                    placeholder="跟进日期"
                    autoFocus
                  />
                </Col>
              </Row></>)}
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                类型:</div></Col>
              <Col span={6}>
                <Radio.Group onChange={this.openseapoolchange}
                  style={{ width: "100%" }}
                  value={this.state.openseapool}>
                  <Radio value={0}>私有池</Radio>
                  <Radio value={1}>公海池</Radio>
                </Radio.Group>
              </Col>
              {this.state.openseapool === 0 && (<>
                <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                  人员:</div></Col>
                <Col span={6}>
                  <Select style={{ width: "100%" }}
                    showSearch
                    allowClear
                    optionFilterProp="children"
                    value={this.state.maintainer}
                    onChange={value => {
                      localStorage.setItem("employeeadminlistmaintainer", value);
                      this.setState({ maintainer: value });
                    }}>
                    {(this.state.employeeuserdata || []).map(item => (
                      <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                    ))}
                  </Select>
                </Col></>)}
              <Col span={8}>
                <Divider type="vertical" />
                <Button type="primary" onClick={() => this.handlesel(1)} >
                  <i className="fa fa-search m-r-5" />
                  查询
                </Button>
                <Divider type="vertical" />
                <Button onClick={() => this.handleclear()} >
                  清空
                </Button>
                <Divider type="vertical" />
                <Button onClick={() => { this.setState({ showall: !this.state.showall }); }} >
                  {this.state.showall && (<UpOutlined />)}
                  {!this.state.showall && (<DownOutlined />)}
                  {this.state.showall ? '默认' : '更多'}
                </Button>
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={10}>
                <Dropdown
                  trigger={["click"]}
                  overlay={
                    <Menu>
                      {currentUser.hasPermission("ryexcelin") && (
                        <Menu.Item key="change-item-in">
                          <Upload {...this.uploadProps()} >
                            <FileExcelOutlinedIcon />Excel导入
                          </Upload>
                        </Menu.Item>)}
                      {currentUser.hasPermission("ryexcelin") && (<Menu.Divider />)}

                      {currentUser.hasPermission("ryexcelout") && (
                        <Menu.Item key="change-item-out">
                          <a onMouseUp={() => this.handlesel(2)}>EXCEL导出</a>
                        </Menu.Item>)}
                      {currentUser.hasPermission("ryexcelout") && (<Menu.Divider />)}
                      {currentUser.hasPermission("batchmove") && (
                        <Menu.Item key="change-item-move">
                          <a onMouseUp={() => this.handlebatchmove()} disabled={this.state.selectedrowkeys.length === 0} >批量转移</a>
                        </Menu.Item>
                      )}
                      {currentUser.hasPermission("batchmove") && (<Menu.Divider />)}
                      {currentUser.hasPermission("fieldshow") && (
                        <Menu.Item key="delete-item">
                          <a onMouseUp={() => this.handlefieldshow()}>显示隐藏列</a>
                        </Menu.Item>
                      )}
                    </Menu>
                  }>
                  <Button type="primary" style={{ margin: "10px" }} data-test="CreateButton" >
                    <AppstoreFilled />更多功能
                  </Button>
                </Dropdown>
              </Col>
            </Row>
            <div>
              <Table rowKey='id'
                rowClassName={(record, index) => getRowClassName(record, index)}
                rowSelection={this.rowSelection()}
                columns={listcolumns}
                scroll={{ x: 'max-content' }}
                dataSource={this.state.data}
                pagination={paginationProps}
                loading={this.state.loading}
                onChange={this.handleTableChange}
              />
            </div>
          </Layout>
        </Layout>
      </ConfigProvider>
    );
  }
}

routes.register(
  "EmployeeAdmin.List",
  routeWithUserSession({
    path: "/employeeadmin",
    title: "人员信息批量处理",
    render: pageProps => <EmployeeAdminList {...pageProps} />,
  })
);
